<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云音乐播放器0337廖金峰</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#C62F2F', // 网易云音乐主色调
            dark: '#1E1E1E',    // 背景色
            'dark-light': '#2D2D2D', // 次要背景色
            light: '#F5F5F5',   // 文字亮色
            muted: '#8C8C8C',   // 次要文字色
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .hover-scale {
        transition: transform 0.3s ease;
      }
      .hover-scale:hover {
        transform: scale(1.05);
      }
      .progress-thumb {
        opacity: 0;
        transition: opacity 0.2s ease;
      }
      .progress-container:hover .progress-thumb {
        opacity: 1;
      }
      .music-visualizer {
        display: flex;
        align-items: flex-end;
        height: 24px;
      }
      .music-visualizer span {
        width: 3px;
        margin: 0 1px;
        background-color: #C62F2F;
        animation: equalize 1s infinite;
        border-radius: 1px;
      }
      @keyframes equalize {
        0%, 100% { height: 4px; }
        50% { height: 16px; }
      }
      .music-visualizer span:nth-child(2) { animation-delay: 0.1s; }
      .music-visualizer span:nth-child(3) { animation-delay: 0.2s; }
      .music-visualizer span:nth-child(4) { animation-delay: 0.3s; }
      .music-visualizer span:nth-child(5) { animation-delay: 0.4s; }
    }
  </style>
</head>
<body class="font-inter bg-dark text-light min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-dark-light/80 backdrop-blur-md border-b border-gray-800 py-3 px-4 fixed top-0 left-0 right-0 z-50">
    <div class="container mx-auto flex items-center justify-between">
      <div class="flex items-center">
        <a href="#" class="text-primary text-xl font-bold mr-6">网易云音乐</a>
        <nav class="hidden md:flex space-x-6">
          <a href="#" class="text-white hover:text-primary transition-colors">发现音乐</a>
          <a href="#" class="text-muted hover:text-primary transition-colors">我的音乐</a>
          <a href="#" class="text-muted hover:text-primary transition-colors">朋友</a>
          <a href="#" class="text-muted hover:text-primary transition-colors">商城</a>
        </nav>
      </div>
      <div class="flex items-center space-x-4">
        <div class="relative hidden md:block">
          <input type="text" placeholder="搜索音乐、歌手、歌词" class="bg-dark rounded-full py-1.5 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 w-64">
          <i class="fa fa-search absolute left-3.5 top-2 text-muted"></i>
        </div>
        <button class="hidden md:block text-sm border border-gray-700 rounded-full py-1 px-4 hover:border-primary transition-colors">
          <i class="fa fa-cloud-upload mr-1"></i>
          <span>创作者中心</span>
        </button>
        <button class="md:hidden text-muted hover:text-white">
          <i class="fa fa-bars text-xl"></i>
        </button>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-1 pt-16 pb-24 flex flex-col md:flex-row">
    <!-- 播放器主体 -->
    <section class="flex-1 p-6 flex flex-col items-center justify-center">
      <div class="max-w-md w-full bg-dark-light rounded-2xl shadow-xl overflow-hidden">
        <!-- 专辑封面 -->
        <div class="relative">
          <img src="https://picsum.photos/800/800?random=4" alt="彩虹专辑封面" class="w-full aspect-square object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent"></div>
          <div class="absolute bottom-4 left-4 right-4">
            <h1 class="text-xl font-bold text-shadow">彩虹</h1>
            <p class="text-muted">周杰伦 - 我很忙</p>
          </div>
        </div>
        
        <!-- 播放控制区 -->
        <div class="p-6">
          <!-- 文件选择器 (用于选择本地音乐文件) -->
          <div class="mb-4">
            <input type="file" id="file-selector" accept="audio/*" class="hidden">
            <button id="select-file-btn" class="w-full py-2 bg-primary/10 text-primary rounded-lg text-sm hover:bg-primary/20 transition-colors">
              <i class="fa fa-music mr-1"></i> 选择本地音乐文件
            </button>
          </div>
          
          <!-- 进度条 -->
          <div class="mb-6">
            <div class="flex justify-between text-xs text-muted mb-1">
              <span id="current-time">0:00</span>
              <span id="total-time">0:00</span>
            </div>
            <div class="progress-container relative cursor-pointer" id="progress-container">
              <div class="h-1 bg-gray-700 rounded-full overflow-hidden">
                <div id="progress-bar" class="h-full bg-primary w-0 rounded-full"></div>
                <div class="absolute top-0 left-0 -translate-x-1/2 -translate-y-1/4 h-3 w-3 bg-white rounded-full shadow-md progress-thumb"></div>
              </div>
            </div>
          </div>
          
          <!-- 控制按钮 -->
          <div class="flex items-center justify-between mb-6">
            <button class="text-muted hover:text-white transition-colors" id="prev-btn">
              <i class="fa fa-step-backward text-xl"></i>
            </button>
            <button class="text-muted hover:text-white transition-colors">
              <i class="fa fa-backward text-xl"></i>
            </button>
            <button id="play-btn" class="w-14 h-14 rounded-full bg-primary flex items-center justify-center text-white transform transition-transform hover:scale-110">
              <i class="fa fa-play text-2xl ml-1"></i>
            </button>
            <button class="text-muted hover:text-white transition-colors">
              <i class="fa fa-forward text-xl"></i>
            </button>
            <button class="text-muted hover:text-white transition-colors" id="next-btn">
              <i class="fa fa-step-forward text-xl"></i>
            </button>
          </div>
          
          <!-- 底部控制 -->
          <div class="flex items-center justify-between">
            <button class="text-muted hover:text-white transition-colors">
              <i class="fa fa-repeat"></i>
            </button>
            <button class="text-muted hover:text-white transition-colors">
              <i class="fa fa-heart-o"></i>
            </button>
            <button class="text-muted hover:text-white transition-colors">
              <i class="fa fa-download"></i>
            </button>
            <button class="text-muted hover:text-white transition-colors">
              <i class="fa fa-share-alt"></i>
            </button>
            <div class="flex items-center">
              <button class="text-muted hover:text-white transition-colors mr-2" id="mute-btn">
                <i class="fa fa-volume-up"></i>
              </button>
              <div class="w-24 relative h-1 bg-gray-700 rounded-full overflow-hidden cursor-pointer" id="volume-container">
                <div id="volume-bar" class="absolute top-0 left-0 h-full bg-primary w-3/4 rounded-full"></div>
                <div class="absolute top-0 left-3/4 -translate-x-1/2 -translate-y-1/4 h-3 w-3 bg-white rounded-full shadow-md opacity-0 hover:opacity-100 transition-opacity"></div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 播放列表 -->
        <div class="border-t border-gray-800 p-4">
          <div class="flex items-center justify-between mb-3">
            <h3 class="font-medium">播放列表 (5)</h3>
            <button class="text-xs text-muted hover:text-primary transition-colors">
              <i class="fa fa-plus-circle"></i> 添加
            </button>
          </div>
          <ul class="space-y-1 max-h-40 overflow-y-auto scrollbar-hide">
            <li class="p-2 rounded hover:bg-dark cursor-pointer text-sm flex items-center playlist-item active">
              <span class="mr-2">1</span>
              <span>彩虹 - 周杰伦</span>
              <div class="ml-auto music-visualizer">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </div>
            </li>
            <li class="p-2 rounded hover:bg-dark cursor-pointer text-sm flex items-center playlist-item">
              <span class="text-muted mr-2">2</span>
              <span>晴天 - 周杰伦</span>
            </li>
            <li class="p-2 rounded hover:bg-dark cursor-pointer text-sm flex items-center playlist-item">
              <span class="text-muted mr-2">3</span>
              <span class="truncate">简单爱 - 周杰伦</span>
            </li>
            <li class="p-2 rounded hover:bg-dark cursor-pointer text-sm flex items-center playlist-item">
              <span class="text-muted mr-2">4</span>
              <span class="truncate">以父之名 - 周杰伦</span>
            </li>
            <li class="p-2 rounded hover:bg-dark cursor-pointer text-sm flex items-center playlist-item">
              <span class="text-muted mr-2">5</span>
              <span class="truncate">稻香 - 周杰伦</span>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </main>

  <!-- 音频元素 -->
  <audio id="audio-player" src="caihong.mp3"></audio>

  <script>
    // 获取DOM元素
    const audioPlayer = document.getElementById('audio-player');
    const playBtn = document.getElementById('play-btn');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    const progressBar = document.getElementById('progress-bar');
    const progressContainer = document.getElementById('progress-container');
    const currentTimeEl = document.getElementById('current-time');
    const totalTimeEl = document.getElementById('total-time');
    const volumeBar = document.getElementById('volume-bar');
    const volumeContainer = document.getElementById('volume-container');
    const muteBtn = document.getElementById('mute-btn');
    const fileSelector = document.getElementById('file-selector');
    const selectFileBtn = document.getElementById('select-file-btn');
    const playlistItems = document.querySelectorAll('.playlist-item');
    
    // 播放/暂停功能
    playBtn.addEventListener('click', togglePlayPause);
    
    function togglePlayPause() {
      if (audioPlayer.paused) {
        audioPlayer.play();
        playBtn.innerHTML = '<i class="fa fa-pause text-2xl"></i>';
      } else {
        audioPlayer.pause();
        playBtn.innerHTML = '<i class="fa fa-play text-2xl ml-1"></i>';
      }
    }

    // 更新进度条
    audioPlayer.addEventListener('timeupdate', updateProgress);
    
    function updateProgress() {
      const { duration, currentTime } = audioPlayer;
      const progressPercent = (currentTime / duration) * 100;
      progressBar.style.width = `${progressPercent}%`;
      
      // 更新时间显示
      currentTimeEl.textContent = formatTime(currentTime);
      
      // 当歌曲加载完成后更新总时长
      if (duration) {
        totalTimeEl.textContent = formatTime(duration);
      }
    }

    // 格式化时间显示
    function formatTime(timeInSeconds) {
      if (isNaN(timeInSeconds)) return '0:00';
      
      const minutes = Math.floor(timeInSeconds / 60);
      const seconds = Math.floor(timeInSeconds % 60);
      
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }

    // 点击进度条跳转
    progressContainer.addEventListener('click', seek);
    
    function seek(e) {
      const width = progressContainer.clientWidth;
      const clickX = e.offsetX;
      const duration = audioPlayer.duration;
      
      if (duration) {
        audioPlayer.currentTime = (clickX / width) * duration;
      }
    }

    // 音量控制
    volumeContainer.addEventListener('click', adjustVolume);
    
    function adjustVolume(e) {
      const width = volumeContainer.clientWidth;
      const clickX = e.offsetX;
      const volumeLevel = clickX / width;
      
      audioPlayer.volume = volumeLevel;
      volumeBar.style.width = `${volumeLevel * 100}%`;
      
      // 更新音量图标
      updateVolumeIcon(volumeLevel);
    }

    // 静音控制
    muteBtn.addEventListener('click', toggleMute);
    
    function toggleMute() {
      audioPlayer.muted = !audioPlayer.muted;
      
      if (audioPlayer.muted) {
        volumeBar.style.width = '0%';
        muteBtn.innerHTML = '<i class="fa fa-volume-off"></i>';
      } else {
        const volumeLevel = audioPlayer.volume;
        volumeBar.style.width = `${volumeLevel * 100}%`;
        updateVolumeIcon(volumeLevel);
      }
    }

    // 更新音量图标
    function updateVolumeIcon(volumeLevel) {
      if (volumeLevel > 0.7) {
        muteBtn.innerHTML = '<i class="fa fa-volume-up"></i>';
      } else if (volumeLevel > 0) {
        muteBtn.innerHTML = '<i class="fa fa-volume-down"></i>';
      } else {
        muteBtn.innerHTML = '<i class="fa fa-volume-off"></i>';
      }
    }

    // 音频加载完成后更新总时长
    audioPlayer.addEventListener('loadedmetadata', () => {
      totalTimeEl.textContent = formatTime(audioPlayer.duration);
    });

    // 上一曲/下一曲功能
    prevBtn.addEventListener('click', () => {
      // 实际应用中应实现切换到上一首歌曲的逻辑
      alert('切换到上一曲');
    });
    
    nextBtn.addEventListener('click', () => {
      // 实际应用中应实现切换到下一首歌曲的逻辑
      alert('切换到下一曲');
    });

    // 文件选择功能
    selectFileBtn.addEventListener('click', () => {
      fileSelector.click();
    });
    
    fileSelector.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file) {
        // 检查文件类型是否为音频
        if (file.type.startsWith('audio/')) {
          // 创建文件的URL
          const fileURL = URL.createObjectURL(file);
          
          // 更新音频源并播放
          audioPlayer.src = fileURL;
          audioPlayer.play();
          playBtn.innerHTML = '<i class="fa fa-pause text-2xl"></i>';
          
          // 更新歌曲信息
          document.querySelector('.music-visualizer').closest('li').querySelector('span:last-child').textContent = file.name.replace(/\.[^/.]+$/, '');
        } else {
          alert('请选择音频文件！');
        }
      }
    });

    // 播放列表点击事件
    playlistItems.forEach((item, index) => {
      item.addEventListener('click', () => {
        // 在实际应用中，这里应该根据索引切换不同的歌曲
        alert(`切换到歌曲: ${item.querySelector('span:last-child').textContent}`);
        
        // 移除所有活动状态
        playlistItems.forEach(i => {
          i.classList.remove('bg-dark', 'text-primary');
          i.classList.add('hover:bg-dark');
          i.querySelector('span:first-child').classList.add('text-muted');
          
          // 移除音乐可视化效果
          const visualizer = i.querySelector('.music-visualizer');
          if (visualizer) {
            visualizer.remove();
          }
        });
        
        // 添加当前活动状态
        item.classList.add('bg-dark', 'text-primary');
        item.classList.remove('hover:bg-dark');
        item.querySelector('span:first-child').classList.remove('text-muted');
        
        // 添加音乐可视化效果
        if (!item.querySelector('.music-visualizer')) {
          const visualizer = document.createElement('div');
          visualizer.className = 'ml-auto music-visualizer';
          visualizer.innerHTML = `
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          `;
          item.appendChild(visualizer);
        }
      });
    });

    // 错误处理
    audioPlayer.addEventListener('error', () => {
      console.error('音频播放错误:', audioPlayer.error);
      alert('无法播放音频文件，请确保文件路径正确或选择其他文件');
    });
  </script>
</body>
</html>